Les 3 - Vue3 Services

Les overzicht

• De algemene structuur van Vue3 beter begrijpen en onderzoeken wat de architectuur is en hoe een Vue applicatie opgebouwd wordt.

Samenvatting

• Vue folder structuur en architectuur
  • Deel 2 van de TOH applicatie bouwen

Stap 1 - Hero toevoegen

Er moeten verschillende dingen gebeuren om een hero toe te voegen:

• Een pagina / view waar we heroes kunnen toevoegen
• Een route naar die pagina
• Een functie om de array van heroes te updaten om eentje toe te voegen
• Een knop in het heroes overzicht om naar de nieuwe pagina te navigeren

Step by step

• We beginnen bij de router -> voeg route toe
• Router klaagt over view, laten we die nu maar eerst aanmaken
• Voorlopige pagina, komen we seffes nog op terug
• In de service gaan we een functie definieren waar we een hero mee aan de lijst toevoegen
• We geven aan deze functie alleen de naam mee want de "number" stelt de id voor en die willen we graag automatisch laten incrementen in een echt systeem zodat er niet per ongeluk dubbele ids aangemaakt kunnen worden
• Voeg de addHero functie toe

const addHero = (name: string) => {
    const maxNumber = Math.max(...heroes.value.map((h) => h.number));
    const newHero = { number: maxNumber + 1, name } satisfies Hero;
    heroes.value.push(newHero);
  };

• We hebben nu alles om de HeroesAddView te vervolledigen

<script setup lang="ts">
  import StyledButton from "@/components/StyledButton.vue";
  import { useHeroes } from "@/services/hero.service";
  import { ref } from "vue";
  import { useRouter } from "vue-router";

  const router = useRouter();
  const { addHero } = useHeroes();

  const name = ref("");
</script>

<template>
  <div class="title">Add hero</div>

  <div>name: <input v-model="name" /></div>

  <div class="buttons">
    <StyledButton @click="router.go(-1)">Back</StyledButton>
    <StyledButton
      :type="'primary'"
      @click="
        addHero(name);
        router.go(-1);
      "
    >
      Save
    </StyledButton>
  </div>
</template>

<style scoped>
  .title {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .buttons {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
  }
</style>

• Laatste stap is een knop toevoegen aan de hero list view waar we mee naar deze pagina navigeren

Stap 2 - Local storage

Omdat we de state van de applicatie alleen in de applicatie bijhouden en niet in een database (backend) zullen de nieuwe heroes maar een kort leven kennen, namelijk tot de volgende page refresh. Er is een manier om data in de browser bij te houden: local storage.

• In de service gaan we de heroes list opslaan in localStorage en ophalen uit localStorage
• een "saveHeroes" functie die bij elke aanpassing aan de lijst uitgevoerd wordt
• een "loadHeroes" functie die bij het opstarten van de app wordt aanroepen in de App.vue onMount

const saveHeroes = () => {
    localStorage.setItem("heroes", JSON.stringify(heroes.value));
  };
  const loadHeroes = () => {
    const savedHeroes = localStorage.getItem("heroes");
    if (savedHeroes) {
      heroes.value = JSON.parse(savedHeroes);
    }
  };

Samenvatting

• SFC waar alles in samenzit
• Components voor herbruikbare blokjes die gecustomised kunnen worden met props
• Layouts vs Pages / Views
• Services om data op te slaan op 1 plaats
• Belangrijk is dat een service een singleton is omdat de data die erin zit consistent moet zijn doorheen de applicatie
• De kracht van alles in de service samen te brengen is dat we nu in onze volgende stap deze localStorage dat gemakkelijk kunnen vervangen door bv interactie met een echte API en al die logica zit op 1 plaats. Zolang we ervoor zorgen dat de interface hetzelfde blijft is er geen probleem.